<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-carousel style="margin-top: -15px" indicator-position="none" arrow="hover">
      <el-carousel-item v-for="item in 2">
        <img :src="'/imgS/publicize0'+item+'.jpg'" style="height: 500px;width: 1200px" :alt="'轮播图'+item">
      </el-carousel-item>
    </el-carousel>
    <el-row style="margin:10px 0">
      <el-col :span="12">
        <el-card style="height: 264px">
          <el-icon style="float: left;font-size: 30px">
            <Histogram/>
          </el-icon>
          <span style="float: left;font-size: 25px;font-family: 仿宋,serif;font-weight: bold">最新公告</span>
          <br>
          <div v-for="item in announcement" style="width: 300px;margin: 0 auto">
            <p><span style="font-weight: bold">标题:</span><span>{{ item.title }}</span></p>
            <p><span style="font-weight: bold">内容:</span><span>{{ item.content.slice(0, 45) }}...
            <el-button type="default" style="margin-left: 16px;height: 25px" @click="drawer = true">
              详细内容
            </el-button></span></p>
            <el-drawer v-model="drawer" :with-header="false">
              <span style="font-weight: bold">{{ item.title }}</span>
              <br>
              <p style="white-space: pre-line;">{{ item.content }}</p>
            </el-drawer>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 264px" v-if="userToken!=null">
          <span style="font-weight: bold;font-family: 仿宋,serif;font-size: 20px;">最近一次预约信息状态</span><br>
          <div v-if="appointment!=null">
            <el-row style="margin-top: 5px">
              <el-col :span="12">
                <span style="font-weight: bold">病情描述:</span>
              </el-col>
              <el-col :span="12">
                <span style="float: left">{{appointment.remark}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="12">
                <span style="font-weight: bold">预约类型:</span>
              </el-col>
              <el-col :span="12">
                <span style="float: left">{{appointment.type}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="12">
                <span style="font-weight: bold">预约科室:</span>
              </el-col>
              <el-col :span="12">
                <span style="float: left">{{appointment.departmentName}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="12">
                <span style="font-weight: bold">预约医生:</span>
              </el-col>
              <el-col :span="12">
                <span style="float: left">{{appointment.doctorName}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="12">
                <span style="font-weight: bold">预约的具体时间:</span>
              </el-col>
              <el-col :span="12">
                <span style="float: left">{{appointment.createDate}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="12">
                <span style="font-weight: bold">预约状态:</span>
              </el-col>
              <el-col :span="12">
                <div style="width:100px;height: 20px;background-color:orange">
                  <span style="line-height: 20px;color: white">{{ appointment.project }}</span>
                </div>
              </el-col>
            </el-row>
            <el-button class="c1" @click="router.push('/patient/appointment')">查看历史预约信息</el-button>
          </div>
          <div v-else>
            <el-row :gutter="10">
              <el-col :span="12">
                <img style="height: 180px;" src="imgS/goutou.jpeg">
              </el-col>
              <el-col :span="12">
                <p>暂无预约信息</p>
                <el-button class="c1" @click="router.push('/patient/newAppointment')">新建预约</el-button>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card style="height: 264px" v-else>
          <span style="font-weight: bold;font-family: 仿宋,serif;font-size: 20px;">最近一次预约信息状态</span><br>
          <el-row :gutter="10">
            <el-col :span="12">
              <img style="height: 180px;" src="imgS/goutou.jpeg">
            </el-col>
            <el-col :span="12">
              <p>暂无预约信息</p>
              <el-button class="c1" @click="router.push('/patient/login')">请先登录</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <p style="float: left">
          <el-icon style="font-size: 20px;line-height: 100%">
            <Coin/>
          </el-icon>
          <span class="pSpanU">专家介绍</span>
          <span class="pSpanE">Expert introduction</span>
        </p>
        <el-divider border-style="solid" style="margin-top: 50px"/>
        <div class="colDiv"/>
      </el-col>
      <el-col :span="12">
        <div style="float: right">
          <el-input placeholder="请输入医生姓名" v-model="inputText" style="margin-top: 16px;width: 150px"/>
          <el-button class="c1" @click="submit(inputText)">提交</el-button>
          <el-button class="c2" @click="router.push('Doctors')">更多>>></el-button>
        </div>
        <el-divider border-style="solid" style="margin-top: 50px"/>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-if="data[0]==null">
      <el-col :span="6" v-for="item in arr">
        <el-card class="modeCard">
          <img :src="BASE_URL+item.imgUrl" alt="医生头像" height="120" width="100">
          <p class="information-title">{{
              item.nickname
            }}医生</p>
          <p style="font-size: 15px" class="information-title">
            {{ item.duties }}</p>
          <el-button style="background-color: #FBC115;color: white;margin-top: 20px" plain @click="selectByDoctorId(item.id)">
            详细
          </el-button>
          <el-button v-if="userToken!=null" style="margin-left: 50px;background-color: #2EAFD6;color: white;margin-top: 20px" @click="router.push('/patient/newAppointment?id='+item.id)">预约</el-button>
          <el-button v-else plain style="margin-left: 50px;background-color: #2EAFD6;color: white;margin-top: 20px" @click="dialogVisible = true">
            预约
          </el-button>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-else>
      <el-col :span="6" v-for="item in data">
        <el-card class="modeCard">
          <img :src="BASE_URL+item.imgUrl" alt="医生头像" height="120" width="100">
          <p class="information-title">{{
              item.nickname
            }}医生</p>
          <p style="font-size: 15px" class="information-title">
            {{ item.duties }}</p>
          <el-button style="background-color: #FBC115;color: white;margin-top: 20px" plain @click="selectByDoctorId(item.id)">
            详细
          </el-button>
          <el-button v-if="userToken!=null" style="margin-left: 50px;background-color: #2EAFD6;color: white;margin-top: 20px" @click="router.push('/patient/newAppointment?id='+item.id)">预约</el-button>
          <el-button v-else plain style="margin-left: 50px;background-color: #2EAFD6;color: white;margin-top: 20px" @click="dialogVisible = true">
            预约
          </el-button>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
        v-model="dialogVisible"
        title="医生预约"
        width="500"
    >
      <span>没有查询到您的账户信息,请先登录</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">返回</el-button>
          <el-button type="primary" @click="router.push('/patient/login')">
            登录
          </el-button>
        </div>
      </template>

    </el-dialog>
    <el-dialog v-model="dialogTableVisible" title="医生详情" width="600">
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生头像:</el-col>
        <el-col :span="12"><img :src="BASE_URL+doctor.imgUrl" alt="医生头像" height="120" width="100"></el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生姓名:</el-col>
        <el-col :span="12">{{doctor.nickname}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生电话:</el-col>
        <el-col :span="12">{{doctor.mobile}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生职务:</el-col>
        <el-col :span="12">{{doctor.duties}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生简介:</el-col>
        <el-col :span="12">{{doctor.profiles}}</el-col>
      </el-row>

    </el-dialog>
    <el-row :gutter="0">
      <el-col :span="12">
        <p style="float: left">
          <el-icon style="font-size: 20px;line-height: 100%">
            <Printer/>
          </el-icon>
          <span class="pSpanU">重点科室</span>
          <span class="pSpanE">Key Specialty</span>
        </p>
        <el-divider border-style="solid" style="margin-top: 50px"/>
        <div style="width: 215px" class="colDiv"></div>
      </el-col>
      <el-col :span="12">
        <div style="float: right">
          <el-button class="c2" @click="router.push('Departments')">全部科室>>></el-button>
        </div>
        <el-divider border-style="solid" style="margin-top: 50px"/>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="12" v-for="item in department">
        <el-card class="modeCard">
          <p class="information-title" style="writing-mode:vertical-rl;
            margin-bottom: -25px;margin-left: 470px;border: 1px solid #FBC115;
            background-color: #FBC115;color: white;font-size: 20px">
            重点</p>
          <div style="width: 24px;height: 20px;clip-path: polygon(100% 0,0 0,50% 100%);
            background-color: #FBC115;margin-left: 471px;margin-top: 25px;margin-bottom: -30px"></div>
          <img :src="BASE_URL+item.imgUrl" alt="科室图片" width="300px">
          <p style="font-size: 25px" class="information-title">
            {{ item.name }}</p>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-button class="c2" style="font-weight: bold;color: #FBC115;font-size: 16px;"
                         @click="router.push('/DepartmentDetails?id='+item.id)">查看详情>>
              </el-button>
            </el-col>
            <el-col :span="12">
              <el-button class="c2" style="font-weight: bold;font-size: 16px" @click="selectByDoctorId(item.id)">负责医生>></el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {Histogram} from '@element-plus/icons-vue'
import {Coin, Printer} from "@element-plus/icons-vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";

const userToken = localStorage.getItem("user-token") ? JSON.parse(localStorage.getItem("user-token")) : null;
const userId = localStorage.getItem("user-id") ? JSON.parse(localStorage.getItem("user-id")):null;
const appointment = ref({})
onMounted(()=>{
  if (userToken!=null) {
    axios.defaults.headers.common['Authorization'] = userToken;
  }
  if (userId!=null) {
    axios.get(BASE_URL + "/v1/appointments/selectByUserId/id=" + userId).then((response) => {
      if (response.data.code === 20000) {
        appointment.value = response.data.data;
      } else ElMessage.error(response.data.message)
    })
  }
  axios.get(BASE_URL+"/v1/doctors/select/pageNum=1").then((response) => {
    if (response.data.code===20000){
      arr.value=response.data.data.list;
      arr.value=arr.value.slice(0,4);
    }else ElMessage.error(response.data.message)
  })
  axios.get(BASE_URL+"/v1/department/select/pageNum=1").then((response)=>{
    if (response.data.code===20000){
      department.value = response.data.data.list.slice(0,2);
    }
  })
})

const doctor = ref({})
const selectByDoctorId=(id)=>{
  dialogTableVisible.value = true
  axios.get(BASE_URL+"/v1/doctors/"+id+"/select").then((response)=>{
    if (response.data.code===20000){
      doctor.value = response.data.data;
    }else ElMessage.error(response.data.message)
  })
}

const drawer = ref(false)
const announcement = ref([{
  title: "关于增加门诊服务的公告", content: "尊敬的患者及家属：\n" +
      "为了更好地满足广大患者的就诊需求，我院决定增加部分门诊服务。具体调整如下：新增内科门诊、外科门诊、儿科门诊等科室的就诊时间和医生资源，以提供更加便捷的医疗服务。\n" +
      "\n" +
      "新的门诊安排如下：\n" +
      "\n" +
      "内科门诊：周一至周五上午8:00-12:00，下午14:00-18:00\n" +
      "外科门诊：周一至周五上午9:00-12:00，下午13:30-17:30\n" +
      "儿科门诊：周一至周五上午10:00-12:00，下午14:00-16:00\n" +
      "请患者合理安排就诊时间，提前预约挂号，以避免人流集中。同时，我们会加强医院内部的疫情防控工作，确保医护人员和患者的健康安全。\n" +
      "\n" +
      "特此通知，感谢您对我们医院的信任与支持。祝您身体健康，谢谢！\n" +
      "\n" +
      "医院名称:达内医院\n" +
      "日期: 2024年 02月 20日"
}])

const arr = ref({})

const dialogVisible = ref(false)
const dialogTableVisible = ref(false)

const inputText = ref('')
const data = ref([])
const submit =()=>{
  if (inputText.value==null||inputText.value===''){
    ElMessage.error("请输入医生姓名!");
    data.value = ref([])
    return;
  }
  axios.get(BASE_URL+"/v1/doctors/selectByNickname/"+inputText.value).then((response)=>{
    if (response.data.code===20000){
      data.value = response.data.data;
    }else ElMessage.error(response.data.message)
  })
}

const department = ref([])
</script>

<style scoped>
.colDiv {
  width: 260px;
  background-color: #2EAFD6;
  height: 5px;
  margin-top: -30px;
}

.pSpanU {
  margin-left: 2px;
  font-weight: bold;
  font-family: 仿宋, serif;
  font-size: 20px;
}

.pSpanE {
  font-size: 15px;
  color: #2EAFD6;
  font-family: 仿宋, serif;
  margin-left: 10px;
}

.c1 {
  margin-top: 16px;
  background-color: #EFF0F0;
}

.c1:hover {
  color: white;
  background-color: #666666;
}

.c2 {
  border: none;
  margin-top: 16px;
  color: #2EAFD6;
}

.c2:hover {
  background-color: white;
}

.c2:focus {
  background-color: white;
}

.information-title {
  font-family: 仿宋, serif;
  font-weight: bold;
  margin: 0;
  font-size: 18px;
  cursor: pointer; /*鼠标悬停变小手*/
}

.modeCard {
  margin-top: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.5s;
}

.modeCard:hover {
  transition: 0.5s;
  transform: scale(1.1);
}
</style>